<template>
	<div class="pd10">
		<template v-if="!visible">
			<div class="padding-bottom">
				<el-button size="small" type="primary" v-if="showBtn" v-auth="auth.add" @click="handleOperate('add', {}, '资料信息-新增')">新增</el-button>
			</div>
			<ApldTable v-bind="tableConfig" :data="tableData">
				<template v-slot:dataTypeLabel="{ row }">
					<p class="flex align-center">
						<span class="fc text-red" v-if="mustLabs.includes(row.dataType)">*</span>
						<span>{{ row.dataTypeLabel }}</span>
					</p>
				</template>
				<template v-if="showBtn" v-slot:menu="{ row }">
					<el-button text type="primary" v-auth="auth.edit" v-if="row.status != -1" size="small" @click="handleOperate('edit', row, '资料信息-修改')"
						>修改</el-button
					>
					<!-- <el-button
						text
						type="primary"
						v-auth="auth.audit"
						v-if="row.reviewStatus == 0"
						size="small"
						@click="handleOperate('audit', row, '资料信息-审核')"
						>审核</el-button
					> -->
					<el-button
						text
						v-auth="auth.delete"
						type="primary"
						v-if="row.status != -1"
						size="small"
						@click="handleOperate('delete', row, '资料信息-删除')"
						>删除</el-button
					>
					<el-button text v-auth="auth.add" type="primary" v-if="row.status == -1" size="small" @click="handleOperate('upload', row, '资料信息-上传')"
						>上传</el-button
					>
				</template>
			</ApldTable>
		</template>

		<div v-else>
			<el-page-header @back="goBack">
				<template #content>
					<span class="text-large font-600 mr-3">{{ dialogTitle }} </span>
				</template>
			</el-page-header>
			<OperateForm :nowRowData="nowData" :operateType="operateType" @refresh="handleRefresh"></OperateForm>
		</div>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ApldTable } from '@/components/AplidCrud'
import OperateForm from './OperateForm/index.vue'
import { uniqBy } from 'lodash-es'

const props = withDefaults(defineProps<{
	nowRowData: any
	showBtn?:boolean
}>(),{
	showBtn:true
})

const tableData = ref([])
const dialogTitle = ref('')
const nowData = ref({})
const operateType = ref('')
const visible = ref(false)
const auth = {
	add: 'view_dpServiceObjectMaterial_add',
	edit: 'view_dpServiceObjectMaterial_edit',
	delete: 'view_dpServiceObjectMaterial_del',
	audit: 'view_dpServiceObjectMaterial_approve',
	list: 'view_dpServiceObjectMaterial_page',
}
const mustLabs = [ '2', '4', '6']
const tableConfig = {
	columns: [
		{
			label: '资料类型',
			prop: 'dataTypeLabel',
		},
		{
			label: '名称',
			prop: 'name',
		},
		{
			label: '上传时间',
			prop: 'createTime',
		},
		{
			label: '到期时间',
			prop: 'endTime',
		},
		{
			label: '资料状态',
			prop: 'status',
			custome: 'tag',
			dicData: [
				{ label: '未上传', value: -1, style: { color: '#FF8800', background: '#FFF3E5' } },
				{ label: '已上传', value: 0, style: { color: '#FF8800', background: '#FFF3E5' } },
				{ label: '即将过期', value: 1, style: { color: '#0052D9', background: '#D9E8FF' } },
				{ label: '已过期', value: 2, style: { color: '#FA3E3E', background: '#FFC4B1' } },
			],
		},
		// {
		// 	label: '审核状态',
		// 	prop: 'reviewStatus',
		// 	custome: 'tag',
		// 	dicData: [
		// 		{ label: '待审核', value: 0, style: { color: '#FF8800', background: '#FFF3E5' } },
		// 		{ label: '审核通过', value: 1, style: { color: '#0052D9', background: '#D9E8FF' } },
		// 		{ label: '审核驳回', value: 2, style: { color: '#FA3E3E', background: '#FFC4B1' } },
		// 	],
		// },
		{
			label: '图片/文件',
			prop: 'material',
			custome: 'file',
		},
		{
			label: '操作',
			prop: 'menu',
			width: 200,
			fixed: 'right',
		},
	],
	showIndex: false,
}

const goBack = () => {
	visible.value = false
}

const handleRefresh = () => {
	visible.value = false
	getInitData()
}
const handleOperate = (type, row, title) => {
	if (type == 'delete') {
		ElMessageBox.confirm(`请确认是否删除此服务对象 ${row.name}信息?`, '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
			.then(() => {
				apiMod.view_dpServiceObjectMaterial_del([row.id]).then((res) => {
					handleRefresh()
					ElMessage({
						type: 'success',
						message: '操作成功!',
					})
				})
			})
			.catch(() => {})
		return
	}
	operateType.value = type
	dialogTitle.value = title
	nowData.value = {
		...row,
		idCard: props.nowRowData.idCard,
	}
	visible.value = true
}
const getInitData = async () => {
	const dictData = await apiMod.getDictItemList(['MATERIAL_DATA_TYPE'])
	const materialList = dictData.data['MATERIAL_DATA_TYPE']
	apiMod
		.view_dpServiceObjectMaterial_page({
			idCard: props.nowRowData.idCard,
			code: 1004,
			pageParaPO: {
				current: 1,
				size: 50,
			},
		})
		.then((res) => {
			const { records } = res.data
			const base = materialList
				.map((item) => {
					if (item.value !== 10) {
						const tempItem = records.find((value) => value.dataType == item.value) || {}
						if (tempItem.dataType == item.value) {
							return {
								...tempItem,
								dataTypeLabel: item.label,
							}
						} else {
							return {
								status: -1,
								dataType: item.value,
								dataTypeLabel: item.label,
								name: item.label,
								idCard: props.nowRowData.idCard,
							}
						}
					}
				})
				.filter(Boolean)
			const otherData = records.filter((item) => item.dataType == 10)
			tableData.value = [...uniqBy([...base], 'dataType'), ...otherData]
		})
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped></style>
